<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>客户信息管理</title>
<meta name="decorator" content="default" />
<link href="${ctxStatic}/jquery-jbox/2.3/Skins/bootstrap/jbox.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(
		function() {
			$("#btnExport").click(
					function() {
						top.$.jBox.confirm("确认要导出产品数据吗？", "系统提示", function(
								v, h, f) {
							if (v == "ok") {
								$("#searchForm").attr("action","${ctx}/pro/clientele/export");
								$("#searchForm").submit();
							}
						}, {
							buttonsFocus : 1
						});
						top.$('.jbox-body .jbox-icon').css('top', '55px');
					});
			$("#btnImport").click(function() {
				$.jBox($("#importBox").html(), {
					title : "导入数据",
					buttons : {
						"关闭" : true
					},
					bottomText : "导入文件不能超过5M，仅允许导入“xls”或“xlsx”格式文件！"
				});
			});
			//全选
			$("#checkAll").click(function() {
						$('input[name="id"]').attr("checked",this.checked);
					});
		});
function page(n, s) {
	$("#pageNo").val(n);
	$("#pageSize").val(s);
	$("#searchForm").attr("action", "${ctx}/pro/clientele/list");
	$("#searchForm").submit();
	return false;
}

//删除
function deleteData() {
			var $id = $("input[name='id']:checked");
			var ids = new Array();
			var j = 0;
			if ($id.val() != null && $id.val() != '') {
				var submit = function (v, h, f) {
				    if (v == 'ok'){
				        $id.each(function(i, info) {
							ids[j] = info.value;
							j++;
						});
				        resetTip();
				        location.href = "${ctx}/pro/clientele/deleteData?ids="+ ids;
				    }else if (v == 'cancel'){
				    	return true;
				    }
				};
				$.jBox.confirm("确认删除此信息吗？", "提示", submit);
			}else{
				jBox.tip("请勾选需要删除的数据！");
			}
		}

//用于分页
var pageNoOne = "";
var pageSizeOne = "";
var countOne = "";
var cId = "";
//查看
function see(obj) {
	cId = $(obj).next().val();
	var newRow = "";
	//获取表格中的数据
	$.getJSON("${ctx}/pro/clientele/see", "id=" + cId,function(data) {
				if (data != null && data.list.length >= 1) {
					$.each(data.list, function(i, info) {
						newRow += '<tr>' 
								+ '<td>' + info.codeNum + '</td>'
								+ '<td>' + info.name + '</td>'
								+ '<td>' + info.phone + '</td>'
								+ '<td>' + info.email + '</td>';
						if(typeof(info.remarks) == "undefined"){
							newRow += '<td></td></tr>';
						}else{
							newRow += '<td>' + info.remarks + '</td></tr>';
						}
					});
					pageNoOne = data.pageNo;
					pageSizeOne = data.pageSize;
					countOne = data.count;
				}
				show(newRow,obj);
		});
	}

	//显示查看框
	function show(newRow,obj) {
		var html = '<div style="width: 778px;padding: 10px;">'
			+'<div style="border: 1px solid #c8d1d5;padding:7px;margin-bottom: 8px;">'
			+'<table style="width: 100%;height：250px;" class="table table-hover table-bordered">'
			+'<tr>'
			+'<td style="width: 259.3px;"><label class="control-label" style="font-size: 14px; margin-bottom: 3px;">客户编号</label></td>'
			+'<td style="width: 259.3px;"><label class="control-label" style="font-size: 14px; margin-bottom: 3px;">客户名称</label></td>'
			+'<td style="width: 259.3px;"><label class="control-label" style="font-size: 14px; margin-bottom: 3px;">客户类型</label></td>'
			+'</tr>'
			+'<tr>'
			+'<td><input type="text" value="'+$(obj).parent().parent().children("td:eq(1)").html()+'" readonly="readonly"/></td></td>'
			+'<td><input type="text" value="'+$(obj).parent().parent().children("td:eq(2)").html()+'" readonly="readonly"/></td></td>'
			+'<td><input type="text" value="'+$(obj).parent().parent().children("td:eq(3)").html()+'" readonly="readonly"/></td></td>'
			+'</tr>'
			+'<tr>'
			+'</tr>'
			+'<tr>'
			+'<td><label class="control-label" style="font-size: 14px; margin-bottom: 3px;">联系电话</label></td>'
			+'<td><label class="control-label" style="font-size: 14px; margin-bottom: 3px;">传真</label></td>'
			+'<td><label class="control-label" style="font-size: 14px; margin-bottom: 3px;">邮箱</label></td>'
			+'</tr>'
			+'<tr>'
			+'<td><input type="text" value="'+$(obj).parent().parent().children("td:eq(4)").html()+'" readonly="readonly"/></td></td>'
			+'<td><input type="text" value="'+$(obj).parent().parent().children("td:eq(5)").html()+'" readonly="readonly"/></td></td>'
			+'<td><input type="text" value="'+$(obj).parent().parent().children("td:eq(6)").html()+'" readonly="readonly"/></td>'
			+'</tr>'
			+'<tr>'
			+'<td colspan="4"><label class="control-label" style="font-size: 14px; margin-bottom: 3px;">备注</label></td>'
			+'</tr>'
			+'<tr>'
			+'<td colspan="4"><input type="text" value="'+$(obj).parent().parent().children("td:eq(7)").html()+'" style="width: 700px;" readonly="readonly"/></td>'
			+'</tr>'
			+'</table></div>'
			+ '<table id="contentTable" class="table table-hover table-bordered">'
			+ '<thead>'
			+ '<tr>'
			+ '<th>联系人编号</th>'
			+ '<th>联系人</th>'
			+ '<th>电话</th>'
			+ '<th>邮箱</th>'
			+ '<th>备注</th>'
			+ '</tr>'
			+ '</thead>'
			+ '<tbody id="tbody">'
			+ newRow
			+ '</tbody>'
			+ '</table>'
			+ '<div class="pagination">'
			+ '<ul>'
			+ '<li id="previousPageLi" class="disabled"><a id="previousPage" href="javascript:">&#171;上一页</a></li>'
			+ '<li id="nextPageLi"><a id="nextPage" href="javascript:">下一页&#187;</a></li>'
			+ '<li class="disabled controls">'
			+ '<a>当前<input type="text" id="pageNoOne" value="'+pageNoOne+'"/> / '
			+ '<input type="text" id="pageSizeOne" value="'+pageSizeOne+'"/>条，共<span id="countOne">'
			+ countOne + '</span> 条</a>' + '</li>' + '</ul>' + '</div>'
			+ '</div>';
			var states = {};
			states.state = {
				content : html,
				buttons : {
					'关闭' : false
				},
				submit : function(v, h, f) {
					return true;
				}
			};
			$.jBox.open(states, '客户',800 );
	}

	//One下一页
	$("#nextPage").live(
			"click",
			function() {
				if (pageNoOne < countOne / pageSizeOne) {
					$("#tbody").html("");
					$.getJSON("${ctx}/pro/clientele/see", "pageNo="
							+ (pageNoOne + 1) + "&id=" + cId,
							function(data) {
								var newRow = "";
								$.each(data.list, function(i, info) {
									newRow =  '<tr>' 
										+ '<td>' + info.name + '</td>'
										+ '<td>' + info.phone + '</td>'
										+ '<td>' + info.email + '</td>';
									if(typeof(info.remarks) == "undefined"){
										newRow += '<td></td></tr>';
									}else{
										newRow += '<td>' + info.remarks + '</td></tr>';
									}

									$("#tbody").append(newRow);
								});
								pageNoOne = data.pageNo;
								pageSizeOne = data.pageSize;
								countOne = data.count;
								$("#pageNoOne").val(pageNoOne);
								$("#pageSizeOne").val(pageSizeOne);
								$("#countOne").text(countOne);
								$("#previousPageLi").attr("class", "");
								if (pageNoOne >= countOne / pageSizeOne) {
									$("#nextPageLi").attr("class", "disabled");
								}
							});
				}
			});

	//One上一页
	$("#previousPage").live(
			"click",
			function() {
				if (pageNoOne > 1) {
					$("#tbody").html("");
					$.getJSON("${ctx}/pro/clientele/see", "pageNo="
							+ (pageNoOne - 1) + "&id=" + cId,
							function(data) {
								var newRow = "";
								var code = "";
								var remarks = "";
								$.each(data.list, function(i, info) {
									newRow =  '<tr>' 
										+ '<td>' + info.codeNum + '</td>'
										+ '<td>' + info.name + '</td>'
										+ '<td>' + info.phone + '</td>'
										+ '<td>' + info.email + '</td>';
									if(typeof(info.remarks) == "undefined"){
										newRow += '<td></td></tr>';
									}else{
										newRow += '<td>' + info.remarks + '</td></tr>';
									}
									$("#tbody").append(newRow);
								});
								pageNoOne = data.pageNo;
								pageSizeOne = data.pageSize;
								countOne = data.count;
								$("#pageNoOne").val(pageNoOne);
								$("#pageSizeOne").val(pageSizeOne);
								$("#countOne").text(countOne);
								$("#nextPageLi").attr("class", "");
								if (pageNoOne <= 1) {
									$("#previousPageLi").attr("class",
											"disabled");
								}
							});
				}
			});
	
	
	
	
</script>
</head>
<body class="fixed-top">
	<div class="container" style="width: 100%;">
		<div style="margin: 20px; border: 1px solid #c8d1d5;">
			<div id="importBox" class="hide">
				<form id="importForm" action="${ctx}/pro/clientele/import"
					method="post" enctype="multipart/form-data" class="form-search"
					style="padding-left: 20px; text-align: center;"
					onsubmit="loading('正在导入，请稍等...');">
					<br /> <input id="uploadFile" name="file" type="file"
						style="width: 330px" /><br /> <br /> <input
						id="btnImportSubmit" class="btn btn-primary" type="submit"
						value="   导    入   " /> <a
						href="${ctx}/pro/clientele/import/template">下载模板</a>
				</form>
			</div>
			<div
				style="padding: 13px; background-color: #f4f4f4; border-bottom: 1px solid #c8d1d5;">
				<h4>
					<i class="icon-globe"></i>客户管理
				</h4>
				<ul class="ul-form" style="float: right; margin-top: -25px;">
					<li style="list-style: none"><a class="btn btn-primary"
						href="${ctx}/pro/clientele/form"> <i class="icon-pencil"></i>&nbsp;新增
					</a> <a class="btn btn-danger" href="javascript:void(0)"
						onclick="deleteData()"> <i class="icon-trash"></i>&nbsp;删除
					</a> <a class="btn btn-info" href="javascript:void(0)" id="btnImport">
							<i class="icon-upload"></i>&nbsp;导入
					</a> <a class="btn btn-info" href="javascript:void(0)" id="btnExport">
							<i class="icon-download"></i>&nbsp;导出
					</a></li>
				</ul>
			</div>
			<div style="margin: 17px;">
				<form:form id="searchForm" modelAttribute="clientele" action="${ctx}/pro/clientele/list" method="post" class="breadcrumb form-search">
					<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}" />
					<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}" />
					<ul class="ul-form">
					<li><label style="width: 150px;">客户编号：</label> <form:input path="codeNum" htmlEscape="false" maxlength="64" class="input-medium"  /></li>
						<li><label>客户名称 ：</label> <form:input path="name" htmlEscape="false" maxlength="64" class="input-medium" /></li>
						<li><label>客户类型：</label>
						 <form:select path="clienteleTypeCodeNum" class="input-medium">
							<form:option value="" label="全部" />
							<form:options items="${fns:getClienteleTypeList()}" itemLabel="name" itemValue="codeNum" htmlEscape="false" />
						 </form:select>
						 </li> 
						<li class="btns"><a class="btn btn-primary" href="javascript:void(0)" onclick="return page();"><i class="icon-search"></i>&nbsp;搜索</a></li>
					</ul>
				</form:form>
				<sys:message content="${message}" />
				<table id="contentTable" class="table table-hover table-bordered" style="word-wrap:break-all;word-break:break-all;">
					<thead>
						<tr>
							<th style="width: 8px;"><input type="checkbox"
								class="group-checkable" id="checkAll" /></th>
							<th>客户编号</th>
							<th>客户名称</th>
							<th>客户类型</th>
							<th>联系电话</th>
							<th>传真</th>
							<th>邮箱</th>
							<th>备注信息</th>
							<th>创建时间</th>
							<shiro:hasPermission name="pro:clientele:edit">
								<th>操作</th>
							</shiro:hasPermission>
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${page.list}" var="clientele">
							<tr>
								<td style="width: 8px;"><input type="checkbox" name="id"
									class="group-checkable" value="${clientele.id}" /></td>
								<td>${clientele.codeNum}</td>
								<td>${clientele.name}</td>
								<td>${clientele.clienteleTypeName}</td>
								<td>${clientele.phone}</td>
								<td>${clientele.fax}</td>
								<td>${clientele.email}</td>
								<td>${clientele.remarks }</td>
								<td><fmt:formatDate value="${clientele.createDate }" pattern="yyyy-MM-dd HH:mm:ss" /></td>
								<shiro:hasPermission name="pro:clientele:edit">
									<td><a href="${ctx}/pro/clientele/form?id=${clientele.id}"><i class="icon-edit"></i></a>
										<a href="${ctx}/pro/clientele/delete?id=${clientele.id}"
										onclick="return confirmx('确认要删除该吗？', this.href)"><i class="icon-remove"></i></a>
										<a href="javascript:" onclick="see(this)"><i class="icon-eye-open"></i></a>
										<input type="hidden" value="${clientele.id}"></td>
								</shiro:hasPermission>
							</tr>
						</c:forEach>
					</tbody>
				</table>
				<div class="pagination">${page}</div>
			</div>
		</div>
	</div>
</body>
</html>